<template>
  <div class="add-workshop">
    <div>
      <label>{{ $t("route.base") }}</label>
      <div></div>
      <button>
        <img /><label>{{ $t("route.Add_workshop") }}</label>
      </button>
    </div>
    <div>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item :label="$t('route.designation')">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="工厂">
          <el-select
            style="margin-left: 10px"
            v-model="form.factory"
            placeholder="请选择工厂"
          >
            <el-option
              v-for="item in factoryList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('route.Remarks')">
          <el-input v-model="form.remark" />
        </el-form-item>

        <el-form-item>
          <el-button @click="addClick" type="primary">{{ $t("route.Add") }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import i18n from "../../i18n/index";
export default {
  data() {
    return {
      form: {
        name: null,
        remark: null,
        factory: null,
      },
      factoryList: [],
    };
  },
  methods: {
    addClick() {
      if (CommonUtils.isEmpty(this.form.name)) {
        this.$message.error(i18n.global.t("route.Name_cannot_be_empty"));
        return;
      }
      http.post(
        api.ADD_WORKSHOP,
        {
          name: this.form.name,
          adminId: this.$store.state.user.id,
          factory: this.form.factory,
          remark: this.form.remark,
        },
        (data) => {
          this.$message.success(i18n.global.t("route.Successfully_added"));
          this.$router.go(-1);
        }
      );
    },
    getAllFactory() {
      http.post(
        api.GET_ALL_FACTORY,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.factoryList.push("全部工厂");
          for (var item of data.data) {
            this.factoryList.push(item.name);
          }
        }
      );
    },
  },
  created() {
    this.getAllFactory();
  },
};
</script>
<style lang="scss" scoped>
.add-workshop {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div:nth-of-type(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }
  }

  > div:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    .input {
    }

    .div-1 {
      display: flex;
      flex-direction: row;

      > label {
        margin-left: 10px;
        width: 200px;
      }
    }
  }
}
</style>
